<!DOCTYPE html>
<html lang="en">
<head>
    <title>主页</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <link rel="stylesheet" type="text/css" href="asserts/plugins/bootstrap/css/bootstrap.css">
    <script src="https://at.alicdn.com/t/font_2572187_fzxgixfnde.js"></script>
    <script src="asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script src="asserts/plugins/bootstrap/js/bootstrap.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>
    <link href="asserts/css/foodPage.css" rel="stylesheet">
    <script src="asserts/js/ajax.js"></script>
    <style>
        .container-wrap {
            width: 100%;
            height: 170px;
            background-color: white;
            white-space: nowrap;
            overflow: hidden;
            overflow-x: scroll;
            text-align: justify;
        }

        .container-wrap > div {
            display: inline-block;
            height: 100px;
            color: black;
            text-align: center;
            line-height: 50px;
        }

        .box {
            width: 9%;
        }

        img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-top: 10px;
        }
        .foods{
            width: 100px;
            height: 100px;
            border-radius: 0;
        }
        #foodList img{
            float: left;
            margin-top: 0;
            margin: 10px;
        }
        #foodList .clean{
            clear: left;
        }
        #foodList span{
            margin-top: 10px;
        }

        .food{
            border: black solid 1px;
        }
        /*div{
            border: black solid 1px;
        }*/
        span{
            display: block;
        }
        #header{
            background-color: #ebebeb;
            height: 40px;
            padding-top: 10px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url: "/catering_system_app/category/getAllCategories",
                async: true,
                type: "get",
                dataType: "json",
                success: function (respData) {
                    jQuery.each(respData.data, function (i, category) {
                        var temp = "<div class='box'><a href='#'><img src=\"imgs/" + category.categoryUrl + "\"><span>"+category.categoryName+"</span></a></div>"
                        $("#tbody").append(temp);
                    })
                }
            });
            listShopName();
            listname();
            $("#logout_1").click(function () {
                alert("11");
                logout();
            })
        })
    </script>
</head>
<body>
<div class="container-fluid">
    <!--头部信息-->
    <div class="row" id="header">
        <div class="row" id="row_1">
            <form class="form-horizontal">
                <div class="col-lg-4" id="col-1">
                    <div class="form-group">
                        <label id="lable_1">在线订餐网站</label>&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;<a href="index.html" class="login" target="_blank" id="login_1">亲，请登录</a>
                        &nbsp;&nbsp;&nbsp;<a href="register.html" class="login" target="_blank">免费注册</a>
                        &nbsp;&nbsp;&nbsp;<a href="shopRegister.html" target="_blank" id="myShop">免费开店</a>
                    </div>
                </div>
                <div class="col-lg-3" id="col_2">
                </div>
                <div class="col-lg-1" id="col_3">
                </div>
                <div class="col-lg-4" id="col_4">
                    <div id="logout">
                        <a href="myCenter.html" target="_blank" id="center">个人中心</a>&nbsp;&nbsp;&nbsp;
                        <a href="myOrder.html" target="_blank" id="myorder">我的订单</a>&nbsp;&nbsp;&nbsp;
                        <a href="foodPage.html" target="_blank">首页</a>&nbsp;&nbsp;&nbsp;
                        <a href="#" id="logout_1">注销</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="row"><h4>美食分类:</h4></div>
    <div class="row" style="border: #0f0f0f solid 1px">
        <div class="container-wrap" id="tbody">

        </div>
    </div>
    <div class="row" style="border: #0f0f0f solid 1px">
        <div class="col-md-3" style="border: #0f0f0f solid 1px">附近商铺</div>

        <div class="col-md-9" style="border: #0f0f0f solid 1px" id="foodList">食品
            <div class="food">
                <img src="asserts/img/011.JPG" class="foods">
                <span><strong>名称</strong></span>
                <span>价格</span>
                <span>描述</span>
                <span class="clean"></span>
            </div>
            <div class="food">
                <img src="asserts/img/011.JPG" class="foods">
                <span><strong>名称</strong></span>
                <span>价格</span>
                <span>描述</span>
                <span class="clean"></span>
            </div>
        </div>

    </div>
</div>
</body>
</html>